<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>2016跑步总结</title>
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/base.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/summary/animate.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/swiper-3.3.1.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/yearend.css?v={$staticVersion}" />

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/js.js"></script>
    <script src="/static/js/mod.js"></script>
    <script src="/static/summary/swiper-3.4.1.min.js"></script>
    <script src="/static/summary/swiper.animate1.0.2.min.js"></script>

</head>
<body>
    <section class="swiper-container">
        <div class="swiper-wrapper" id="year-box" style="padding: 0">
              
        </div>
    </section>

    
    <!-- 第六屏 2017目标 分享 -->
    <script type="text/html" id="newyear">
        <section class="swiper-slide bigdata ac bg-blue">
            <div class="pagedown ani"  swiper-animate-effect="slideInUp" swiper-animate-duration="0.2s" swiper-animate-delay="2.3s">
                <img src="/static/images/share/logo-blue.png">
                <a class="arrow-down swiper-button-next"></a>
            </div>
            <div class="con">
                <div class="dwb">
                    <img class="head-img mr10" src="<%=result.list.header%>">
                    <p class="user-name"><%=result.list.nickname%></p>
                </div>
                <img class="data-img ani" swiper-animate-effect="slideInUp" swiper-animate-duration="0.2s" swiper-animate-delay="0s" src="/static/images/summary/dsj.png">
                
                <ul class="data-list ani" swiper-animate-effect="slideInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
                    <li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.7s" swiper-animate-delay="0.4s">
                        使用虎扑跑步<b><%=result.list.useCnt%></b>天
                    </li>
                    <li class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.7s" swiper-animate-delay="0.7s">
                        总里程<b><%=result.list.mileage%></b>公里<br/>
                        最远记录<b><%=result.list.maxMileage%></b>公里<br/>
                        最快配速<b><%=result.list.maxSpeed%></b>
                    </li>
                    <li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.7s" swiper-animate-delay="1s">
                       等级成就 <b><%=result.list.level%></b>
                    </li>
                    <li class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.7s" swiper-animate-delay="1.3s">
                        经常跑步的时间 <b><%=result.list.runTimeMsg%></b><br/>
                        足迹遍布<b><%=result.list.cityCnt%></b>个城市 <br/>
                        最常跑步地点 <b><%=result.list.city%></b>
                    </li>
                    <li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.7s" swiper-animate-delay="1.6s">
                        获得<b><%=result.list.medalCnt%></b>个勋章成就<br/>
                        获得<b><%=result.list.certificateCnt %></b>张跑步证书
                    </li>
                </ul>
                <p class="f13 ani"  swiper-animate-effect="zoomInRight" swiper-animate-duration="0.3s" swiper-animate-delay="1.8s">继续查看详细报告</p>
               
            </div>
        </section>
        <!-- 第二屏 大数据 -->
        <section class="swiper-slide report ac bg-quan">
            <div class="pagedown">
                <img src="/static/images/share/logo-blue.png">
                <a class="arrow-down swiper-button-next"></a>
            </div>
            <div class="con">
                <div class="dwb">
                    <img class="head-img mr10" src="<%=result.list.header%>">
                    <p class="user-name"><%=result.list.nickname%></p>
                </div>
                <img class="w35 ani"  swiper-animate-effect="slideInUp" swiper-animate-duration="0.2s" swiper-animate-delay="0s" src="/static/images/summary/reporpt.png?v=4">
                <p class="f14 ani  swiper-animate-effect="slideInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0s"">使用虎扑跑步 <%=result.list.useCnt%> 天</p>
                <ul class="ani"  swiper-animate-effect="flipInY" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
                    <li>
                        总里程<b><%=result.list.mileage%></b>公里，<br/>
                        相当于跑了<b><%=result.list.marathonCnt%></b>个全马
                        <img src="/static/images/summary/mz.png">
                    </li>
                    <li>
                        跑步<b><%=result.list.runCnt%></b>次，平均每周跑
                        <b><%=result.list.runAvgWeekCnt%></b>次
                        <img src="/static/images/summary/rl.png">

                    </li>
                    <li >
                        跑步<b><%=result.list.elapsedtime%></b>分钟，<br/>
                        相当于每天少刷朋友圈<b><%=result.list.wechatTime%></b>分钟
                        <img src="/static/images/summary/phone.png">

                    </li>
                    <li>
                        消耗卡路里<b><%=result.list.calorie%></b>kcal，<br/>
                        可燃烧<b><%=result.list.fatCnt%></b>公斤脂肪
                        <img src="/static/images/summary/chicken.png">

                    </li>
                </ul>
              
            </div>

        </section>
        <!-- 第san屏 跑步报告 -->
        <section class="swiper-slide report ac bg-quan">
            <div class="pagedown" >
                <img src="/static/images/share/logo-blue.png">
                <a class="arrow-down swiper-button-next"></a>
            </div>
            <div class="con">
                <div class="dwb">
                    <img class="head-img mr10" src="<%=result.list.header%>">
                    <p class="user-name"><%=result.list.nickname%></p>
                </div>
                <img class="w35"  src="/static/images/summary/report.png?v=3">
                <p class="f14" >使用虎扑跑步 <%=result.list.useCnt%> 天</p>
                <ul class="ani"  swiper-animate-effect="wobble" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
                    <li>
                        发布跑友秀
                         <img src="/static/images/summary/camera.png">
                        <b><%=result.list.postsCnt%></b>次，评论
                        <b><%=result.list.commentCnt%></b>次，<br/>
                        为他人点赞<b><%=result.list.lights%></b>个
                        <img src="/static/images/summary/zan.png"><br/>
                        收获了他人的赞<b><%=result.list.byLights %></b>个
                        <img src="/static/images/summary/szan.png">
                    </li>
                    <li>
                        加入了<b><%=result.list.groupCnt %></b>个群组 
                        <img src="/static/images/summary/qz.png">
                        结交了<b><%=result.list.runFriendsCnt%></b>个好友<br/>
                        最活跃的群组是<b>“<%=result.list.mostUserGroup%>”</b>
                    </li>
                    <li>
                        参与了<b><%=result.list.activityCnt%></b>次群组活动
                        <img src="/static/images/summary/fz.png"><br/>
                        获得<b><%=result.list.certificateCnt %></b>张荣誉证书
                        <img src="/static/images/summary/zs.png">
                    </li>
                </ul>
               
            </div>
        </section>
        <!-- 第si屏 社交报告 -->
        <section class="swiper-slide target ac bg" >
            <div class="con" style="padding:0">
                <img class="target-img" src="/static/images/summary/2017.png">
                <p><%=result.list.nickname%>的目标是 </p>
                <div class="target-box">
                     <span>
                      <%if(result.list.targetMileageType==1){%>
                        300-500
                      <%}else if(result.list.targetMileageType==2){%>
                        500-1000
                      <%}else if(result.list.targetMileageType==3){%>
                        1000-2000
                      <%}else if(result.list.targetMileageType==4){%>
                        超过2000
                      <%}else{%>
                        未设置
                      <%}%>
                    </span><br/>
                    公里<br/>
                    已加 <span class="f18 dib pt10"><%=result.list.lightMileage %></span> 公里
                </div>
                <div class="zan-box">
                    一赞一公里
                    <a id="heart"><img class="" src="/static/images/summary/zan.png"></a>
                </div>
                <p class="f12 ac color-white">
                    为Ta点个赞，2017年就多跑一公里！
                </p>
                <a class="down-app dib">用虎扑跑步app  我们一起运动 >></a>
                <div class="egg" style="display: none;">
                    <img src="/static/images/summary/egg-light.png?v=1">
                    <img src="/static/images/summary/egg.png?v=1">
                </div>
            </div>
        </section>
    </script>
</body>
 <script>
    rem();
    var uid ={$uid};
    var alphaId="{$alphaId}";
    $.get('{$appHost}/analysis_runWeb/getYearRunDataReviewForUser',{'uid':uid}, renderHome);
    function renderHome(data) {
        data = JSON.parse(data);
        console.log(data)
         var html = template('newyear', data);
        $('#year-box').html(html);
        var screenHeight = document.body.scrollHeight;
        var swiper = new Swiper('.swiper-container', {
            paginationClickable: true,
            direction: 'vertical',
            nextButton:'.swiper-button-next',
            onInit: function(swiper){
                swiperAnimateCache(swiper); 
                swiperAnimate(swiper);
            }, 
            onSlideChangeEnd: function(swiper){ 
                swiperAnimate(swiper);
            } 
        });
        // 滑屏js
        var kilometre =$(".f18").html();
        $("#heart").click(function(){
            $.post("{$appHost}/analysis_runWeb/incTargetMileageByLight",{'uid':uid}, function(data, error) {
                console.log(data)
            })
            _hmt.push(['_trackEvent', 'report2016', 'report2016encourage']);

            $("#heart img").addClass('img-zan')
            $("#heart").addClass('on')
            $("#heart").unbind();
            setTimeout(function(){
                $(".f18").html(kilometre*1+1)
            }, 1000);
            
            if(kilometre>9999){
                $(".f18").html("9999+")
            }
            setTimeout(function(){
                 $(".egg").fadeIn("slow");
            }, 2000);
        })
        $(".egg").click(function(){
            window.location.href="newYear"
        })
        $(".down-app").click(function(){
            var qq = 'http://a.mlinks.cc/Aagn?url='+encodeURIComponent('{$staticHost}/show/yearEnd?uid='+uid);
            window.location.href=qq;
        })
        {template 'show/year-animation'}
    }


</script>
{template 'show/web-footer'}